<!--
 * @Description: 设备信息
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-07-06 09:22:12
 * @LastEditTime: 2021-09-22 14:21:06
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col xs="24" :sm="12" :lg="8">
        <div class="setting-box">
          <div class="device-title">
            <span>设备信息</span>
            <span class="device-icon">
              <svg class="svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zuhuguanli" />
              </svg>
            </span>
          </div>
          <div class="device-info">
            <div class="left">
              <img src="/static/images/device.png" class="device-img" />
            </div>
            <div class="right">
              <ul>
                <li>
                  <span>网元名称：</span>
                  <span>{{neInfo.userlabel}}</span>
                </li>
                <li>
                  <span>网元ID：</span>
                  <span>{{neInfo.id}}</span>
                </li>
                <li>
                  <span>网元型号：</span>
                  <span>{{neInfo.typeLabel}}</span>
                </li>
                <li>
                  <span>软件SN：</span>
                  <span v-if="neInfo.extAttrs">{{neInfo.extAttrs.esn | filterSN }}</span>
                </li>
                <li>
                  <span>IP地址：</span>
                  <span>{{neInfo.ipAddress}}</span>
                </li>
                <li>
                  <span>状态：</span>
                  <span v-if="neInfo.connectionState === 'CONNECTED'">
                    <el-tag type="success">链接</el-tag>
                  </span>
                  <span v-if="neInfo.connectionState === 'DISCONNECTED'">
                    <el-tag type="danger">断链</el-tag>
                  </span>
                  <span v-if="neInfo.connectionState === 'UNKNOWN'">
                    <el-tag type="warning">未知</el-tag>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <el-col xs="24" :sm="12" :lg="16">
        <div class="setting-box">
          <el-tabs type="card" v-model="activeName">
            <el-tab-pane :name="item.type" v-for="(item, index) in tabList" :key="index">
              <template>
                <span slot="label">{{item.title}}</span>
                <ul class="dev_options" v-if="item.children.length > 0">
                  <li
                    @click="goItemRouter(subItem.path)"
                    v-for="(subItem, subIndex) in item.children"
                    :key="subIndex"
                  >
                    <svg class="svg-icon" aria-hidden="true">
                      <use :xlink:href="subItem.icon" />
                    </svg>
                    <span>{{subItem.name}}</span>
                  </li>
                </ul>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ['neId', 'neInfo', 'show'],
  data () {
    return {
      activeName: 'device',
      tabList: [
        {
          id: '001',
          title: '设备信息',
          type: 'device',
          show: true,
          children: [
            {
              key: 'neInfo',
              icon: '#icon-zuhuguanli',
              name: '网元信息',
              type: 'neInfo',
              path: '/configure/info/'
            },
            {
              key: 'linkSite',
              icon: '#icon-zuhuguanli',
              name: '关联站点',
              type: 'site',
              path: '/configure/siteInfo/'
            },
            {
              key: 'alarm',
              icon: '#icon-zuhuguanli',
              name: '告警信息',
              type: 'alarm',
              path: '/configure/neAlarm/'
            },
          ]
        },
        {
          id: '002',
          title: '业务安全',
          type: 'safe',
          show: false,
          children: [
            {
              key: 'rule',
              icon: '#icon-zuhuguanli',
              name: '流量过滤',
              type: 'rule',
              path: '/configure/rule/'
            }
          ]
        },
        {
          id: '003',
          title: '应用体验',
          type: 'experience',
          show: true,
          children: [
            {
              key: 'app',
              icon: '#icon-zuhuguanli',
              name: '应用识别',
              type: 'app',
              path: '/configure/neTrace/'
            },
            {
              key: 'router',
              icon: '#icon-zuhuguanli',
              name: '应用选路',
              type: 'router',
              path: '/configure/router/'
            },
            {
              key: 'bandwidth',
              icon: '#icon-zuhuguanli',
              name: '带宽保证',
              type: 'bandwidth',
              path: '/configure/neBandwidth/'
            }
          ]
        },
        {
          id: '004',
          title: '设备运维',
          type: 'action',
          show: true,
          children: [
            {
              key: 'Trace',
              icon: '#icon-zuhuguanli',
              name: 'Trace',
              type: 'trace',
              path: '/configure/neTrace/'
            },
            {
              key: 'Up',
              icon: '#icon-zuhuguanli',
              name: '版本升级',
              type: 'grade',
              path: '/configure/neUpgrade/'
            },
          ]
        },
        {
          id: '005',
          title: '网元路由',
          type: 'neRouting',
          show: true,
          children: [
            {
              key: 'routing',
              icon: '#icon-zuhuguanli',
              name: '流量过滤',
              type: 'routing',
              path: '/configure/neRouting/'
            }
          ]
        },
        {
          id: '006',
          title: '设备接口',
          type: 'interface',
          show: true,
          children: [
            {
              key: 'tcpmss',
              icon: '#icon-zuhuguanli',
              name: 'TCPMSS',
              type: 'tcpmss',
              path: '/configure/neTcpmss/'
            }
          ]
        },
        {
          id: '007',
          title: '位置信息',
          type: 'location',
          show: true,
          children: []
        }
      ]
    };
  },
  methods: {
    // 标签页的路由跳转
    goItemRouter (path) {
      this.$router.push({
        path: path + this.neId
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.setting-container {
  .setting-box {
    background: #fff;
    height: 300px;
    padding: 10px 15px;
    margin-bottom: 15px;
    .dev_options {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > li {
        padding: 15px;
        cursor: pointer;
        .svg-icon {
          width: 60px;
          height: 60px;
        }
        & > span {
          display: block;
        }
        &:hover {
          .svg-icon {
            color: #3296fa;
          }
          & > span {
            color: #3296fa;
          }
        }
      }
    }
    .device-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > span {
        color: #555;
        font-size: 15px;
      }
      .device-icon {
        cursor: pointer;
        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }
    }
    .device-info {
      .left {
        width: 157px;
        height: 157px;
        padding: 40px 20px 0 20px;
        float: left;
        .device-img {
          width: 157px;
          height: 157px;
        }
      }
      .right {
        margin-top: 15px;
        float: left;
        & > ul {
          li {
            margin-bottom: 3px;
            font-size: 14px;
            line-height: 28px;
          }
        }
      }
    }
  }
}
</style>